<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="css/estilo.css" />
    </head>
    <body>
        <header>
            <div class="row headerAction">
                <div id="wrapper">
                    <div class="floatLeft padding width20">
                        <a href="#">
                            Home
                        </a>
                        <a href="#" class="actionMargin">
                            Sobre
                        </a>
                        <a href="#" class="actionMargin">
                            Contato
                        </a>
                    </div>
                    <div class="floatLeft width35 textRight">
                        <span>
                            <img class="country" height="22" src="img/phone.png" />
                        </span>
                    </div>
                    <div class="floatLeft width15 padding">
                        <span>
                            55 51 3061 - 2744
                        </span>
                    </div>
                    <div class="floatRight paddingSides width15 textRight">
                        <span>
                            <a href="#">
                                <img class="country" src="img/Brazil.png" />
                            </a>
                            <a href="#">
                                <img class="country" src="img/United-States.png" />
                            </a>
                            <a href="#">
                                <img class="country" src="img/Spain.png" />
                            </a>
                        </span>
                    </div>
                </div>
            </div>
            <div class="row headerSearch">
                <div id="wrapper">
                    <div class="floatLeft padding width20">
                        <h1 id="titulo">
                            Sir Games
                        </h1>
                    </div>
                    <div class="floatLeft headerSeachVerticalAlign textCenter width60">
                        <form>
                            <select name="estadocivil" id="estado_civil">
                                <option label="Categoria" value="-1" selected="selected">Categoria</option>
                                <option label="Norte" value="S">Norte</option>
                                <option label="Sul" value="C">Sul</option>
                                <option label="Leste" value="V">Leste</option>
                                <option label="Oeste" value="E">Oeste</option>
                            </select>
                            <input type="text" size="70" placeholder="Pesquisar..." >
                        </form>
                    </div>
                    <div class="floatRight paddingSides textRight width10">
                        <a href="#">
                            <span class="cart">
                                0
                            </span>
                            <img src="img/cart.png" />
                        </a>
                    </div>
                </div>
            </div>
        </header>
        <div class="row">
            <div id="wrapper">
                <nav class="floatLeft padding">
                    <ul id="menu">
                        <li class="listTitle">
                            <a href="#">
                                SEGA
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Master System
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Megra Drive
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Sega Saturn
                            </a>
                        </li>

                        <li class="listTitle">
                            <a href="#">
                                NINTENDO
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                NES
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                SNES
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                N64
                            </a>
                        </li>

                        <li class="listTitle">
                            <a href="#">
                                NEO-GEO
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Neo-Geo cabine
                            </a>
                        </li>

                        <li class="listTitle">
                            <a href="#">
                                ATARI
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Atari 2600
                            </a>
                        </li>
                    </ul>
                </nav>
                <section class="floatRight width70 padding">
                    <div class="row">
                        <div class="highlight">
                            <ul class="displayInline">
                                <li class="width30 textCenter">
                                    <h2>
                                        NEO-GEO
                                        <br /><br />
                                        GABINE
                                    </h2>
                                </li>
                                <li class="width30 textLeft">
                                    <a href="#">
                                        <img src="img/produtos/neogeo.png" height="200" />
                                    </a>
                                </li>
                                <li class="width30 textLeft">
                                    <p>
                                        no boleto por:
                                        <span class="highlightValue">
                                            R$ 1299,00
                                        </span>
                                    </p>
                                    <p>
                                        ou parcele em até 12x de:<br/> R$133,25 (total: R$ 1599,00)
                                    </p>
                                    <p class="highlightValue">
                                        <a href="#">
                                            COMPRE AGORA
                                        </a>
                                    </p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="row news">
                        <div>
                            <ul>
                                <li class="listTitle">
                                    <a href="#">
                                        SEGA
                                    </a>
                                </li>
                                <li class="listDetails">
                                    <div class="floatLeft textLeft borderRight">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <img src="img/produtos/Master.png" height="120" />
                                                </a>
                                            </li>
                                            <li>
                                                <p>
                                                    <strong>Sega Master System</strong>
                                                </p>
                                                <p>
                                                    De: 
                                                    <span>
                                                        R$ 899,99
                                                    </span>
                                                </p>
                                                <p>
                                                    <strong>De: R$ 799,99</strong>
                                                </p>
                                                <p>
                                                    <a href="#" class="highlightLink">
                                                        > Mais detalhes
                                                    </a>
                                                </p>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="floatLeft textLeft">
                                        <ul>
                                            <li>
                                                <a href="#">
                                                    <img src="img/produtos/SegaMegadrive.jpg" height="120" />
                                                </a>
                                            </li>
                                            <li>
                                                <p>
                                                    <strong>Sega Megadrive</strong>
                                                </p>
                                                <p>
                                                    De: 
                                                    <span>
                                                        R$ 799,99
                                                    </span>
                                                </p>
                                                <p>
                                                    <strong>De: R$ 699,99</strong>
                                                </p>
                                                <p>
                                                    <a href="#" class="highlightLink">
                                                        > Mais detalhes
                                                    </a>
                                                </p>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <footer>
            <div class="row payment">
                <div id="wrapper">
                    <div class="floatLeft paymentVerticalAlign paddingSides">
                        <img src="img/visa.png" />
                        <img src="img/master.png" />
                        <img src="img/elo.png" />
                        <img src="img/american.png" />
                        <img src="img/diners.png" />
                        <img src="img/hipercard.png" />
                    </div>
                    <div class="floatLeft paymentVerticalAlign paddingSides">
                        <img src="img/brasil.png" />
                        <img src="img/itau.png" />
                        <img src="img/santander.png" />
                    </div>
                    <div class="floatLeft paymentVerticalAlign paddingSides">
                        <img src="img/boleto.png" />
                        <img src="img/paypal.png" />
                    </div>
                    <div class="floatRight paymentVerticalAlign paddingSides">
                        <img src="img/blindado.png" />
                        <img src="img/ebit.png" />
                    </div>
                </div>
            </div>
            <div class="row copyright">
                <div id="wrapper">
                    <div class="floatLeft width20 copyrightVerticalAlign paddingSides">
                        <strong>
                            Sir Games
                        </strong>
                    </div>
                    <div class="floatLeft width60 copyrightVerticalAlign">
                        © 2014 - Todos os direitos reservados.
                        <a href="#" class="actionSpacing">Termos de uso</a>
                        <a href="#" class="actionSpacing">Política de privacidade</a>
                    </div>
                    <div class="floatRight width10 paddingSides textRight">
                        <img src="img/facebook.png" />
                        <img src="img/twitter.png" />
                    </div>
                </div>
            </div>
        </footer>
    </body>
</html>
